export function getAppVueContent() {
  return `<template>
  <div id="app">
    <h1>Vue Router 基础</h1>
    <div class="nav">
      <router-link to="/">首页</router-link> | 
      <router-link to="/about">关于</router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
h1 {
  font-size: 1.5em;
  color: #3eaf7c;
  margin-bottom: 1em;
}

.nav {
  margin-bottom: 2em;
}

.router-link-active {
  color: #3eaf7c;
  font-weight: bold;
}

a {
  margin: 0 0.5em;
  text-decoration: none;
  color: #2c3e50;
}

.page {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 20px;
}
</style>`
}

export function getHomeVueContent() {
  return `<script setup>
// Home.vue 组件
import { ref } from 'vue'

const message = ref('欢迎来到首页！')
</script>

<template>
  <div class="page">
    <h2>首页</h2>
    <p>{{ message }}</p>
  </div>
</template>

<style scoped>
h2 {
  color: #3eaf7c;
}
</style>`
}

export function getAboutVueContent() {
  return `<script setup>
// About.vue 组件
import { ref } from 'vue'

const details = ref('这是一个关于页面，提供网站信息。')
</script>

<template>
  <div class="page">
    <h2>关于我们</h2>
    <p>{{ details }}</p>
  </div>
</template>

<style scoped>
h2 {
  color: #42b883;
}
</style>`
}

export function getRouterJsContent() {
  return `// router.js - 路由配置文件
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

// 定义路由配置
const routes = [
  { 
    path: '/', 
    component: Home
  },
  { 
    path: '/about', 
    component: About
  }
  // 你可以添加更多路由：
  // { path: '/contact', component: Contact },
  // { path: '/products', component: Products }
]

// 创建路由实例
const router = createRouter({
  // 使用hash模式，这样页面不会重新加载
  history: createWebHashHistory(),
  routes
})

export default router`
}

export function getMainJsContent() {
  return `// main.js - 应用入口文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'

const app = createApp(App)

// 注册路由
app.use(router)

// 挂载应用
app.mount('#app')
`
}

export function getDescription() {
  return "# Vue Router 入门\n\nVue Router是Vue.js官方的路由管理器。它可以帮助开发者创建单页面应用程序，实现页面间的无刷新跳转。\n\n## 基本用法\n\n1. 安装Vue Router：\n   ```bash\n   npm install vue-router@4\n   ```\n\n2. 创建路由配置文件router.js\n3. 在main.js中导入并使用Vue Router\n4. 创建页面组件（Home.vue、About.vue）\n5. 在App.vue中使用router-view渲染路由组件\n\n## 练习\n\n修改右侧文件，尝试：\n- 在router.js中添加更多路由\n- 修改Home.vue和About.vue的内容\n- 添加新的页面组件\n\n然后观察页面的变化。"
}

export function getExamples() {
  return {
    'step-1': {
      'description.md': getDescription(),
      'App.vue': getAppVueContent(),
      'Home.vue': getHomeVueContent(),
      'About.vue': getAboutVueContent(),
      'router.js': getRouterJsContent(),
      'main.js': getMainJsContent()
    }
  }
} 